<template>
  <div class="login-container">
    <el-row :gutter="10">
      <el-col :span="12" class="login-area">
        <div class="login-form">
          <div class="login-form-title">
            欢迎登录图书在线管理系统
          </div>
          <div class="login-form-body">
            <el-input class="form-input" type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
            <el-input class="form-input" type="password" v-model="loginForm.password" placeholder="请输入密码"/>
            <el-button class="form-input" type="primary" @click="handleLogin">登    录</el-button>
          </div>
          <div class="login-form-footer">
            <div class="tip">还没有账号？<a href="/login/register">去注册</a></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12"/>
    </el-row>
  </div>
</template>

<script setup lang="ts">

import { useApi } from "~/composeables";

const router = useRouter();
const api = useApi();

const loginForm = ref({
  username: '',
  password: ''
});

const handleLogin = ()=>{
  loginForm.value;
  api.auth.login(loginForm)
    .then(res=>{
      if(res.success){
        window.localStorage.setItem("token", res.data);
        ElMessageBox.alert("您已成功登录！").then(()=>{
          if(res.data.rolrName === '普通用户'){
            window.location.href = '/home/userCenter'
          }else{
            window.location.href = '/admin'
          }
        })
      }else{
        ElMessage.error("登录失败，请检查用户名和密码！");
      }
    }).catch(err=>{
      ElMessage.error("登录失败，请检查网络连接！");
      console.error(err);
  })
}

</script>


<style scoped>
.login-container{
  width: calc(100vw);
  height: calc(100vh);
  background-image: url("/login-bg.jpg");
  background-size: cover;
}

.login-area{
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh);
}

.login-form{
  height: 300px;
  width: 320px;
  background: #CCCCCC5A;
  padding: 40px;
  border-radius: 10px;
}

.login-form-title{
  width: 100%;
  height: 45px;
  font-size: 1.5em;
  font-weight: bold;
}

.form-input{
  width: 100%;
  height: 45px;
  margin: 10px 0;
}
</style>

